import React, { Component } from "react";
// import store from './store/transit'
import axios from "axios";

import { CHANGE_BANNER_LIST, CHANGE_PRO_LIST } from "./store/types";
import { connect } from "react-redux";

class Page1 extends Component {

    componentDidMount() {
        axios.get('http://121.89.205.189:3000/api/pro/list').then(res=>{
            // console.log(res.data.data);
            // store.dispatch({type: CHANGE_PRO_LIST, payload: res.data.data})
            this.props.changeProList(res.data.data)
        })

        axios.get('http://121.89.205.189:3000/api/banner/list').then(res=>{
            // console.log(res.data.data);
            // store.dispatch({type: CHANGE_BANNER_LIST, payload: res.data.data})
            this.props.changeBannerList(res.data.data)
            console.log(res.data.data);
            // console.log(this.props.bannerList);
            
            
        })
    }
    render() {
        
        // const countNum = store.getState().count.count;
        
        return <>
            <h1>Page1 -- {this.props.count}</h1>
          
            <ul>
                {this.props.proList.map((item) => {
                    return <li key={item.proid}>{item.proname}</li>
                })}
            </ul>

            <h2>Banner</h2>

            <ul>
                { this.props.bannerList.map((item) => {
                    return <li key={item.bannerid}><img src={item.img} style={{ width: 150 }} alt="" /></li>
                })}
            </ul>


        </>
    }
}

const mapStateToProps = (state) =>{
    return {
        proList: state.pro.proList,
        count: state.count.count,
        bannerList: state.pro.bannerList
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        add(){
            dispatch({type: 'add'})
        },
        addNum: (value) => {
            dispatch({type: 'addNum', payload: value})
        },
        changeProList: (value) => {
            dispatch({type: CHANGE_PRO_LIST, payload: value})
        },
        changeBannerList: (value) => {
            dispatch({type: CHANGE_BANNER_LIST, payload: value})
        }

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page1);